<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        h1 { color: #333; }
        .card { border: 1px solid #ddd; border-radius: 4px; padding: 15px; margin-bottom: 15px; }
        .btn { display: inline-block; padding: 8px 12px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px; cursor: pointer; }
        .btn:hover { background-color: #45a049; }
        .btn-danger { background-color: #f44336; }
        .btn-danger:hover { background-color: #d32f2f; }
        .btn-primary { background-color: #2196F3; }
        .btn-primary:hover { background-color: #0b7dda; }
        .nav { margin-bottom: 20px; }
        .nav a { margin-right: 15px; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; }
        th { background-color: #f2f2f2; }
        .actions { white-space: nowrap; }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav">
            <a href="/">首页</a>
            <a href="/users">用户列表</a>
            <a href="/api">网页制作</a>
        </div>

        <div class="card">
            <h1>{{.title}}</h1>
            <a href="/" class="btn">返回首页</a>

            <div style="margin-top: 20px;">
                {{if .users}}
                <table>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                    {{range .users}}
                    <tr>
                        <td>{{.ID}}</td>
                        <td>{{.Name}}</td>
                        <td>{{.Age}}</td>
                        <td class="actions">
                            <a href="/users/edit/{{.ID}}" class="btn btn-primary">编辑</a>
                            <button class="btn btn-danger" onclick="deleteUser('{{.ID}}')">删除</button>
                        </td>
                    </tr>
                    {{end}}
                </table>
                {{else}}
                <p>暂无用户</p>
                {{end}}
            </div>
        </div>

        <div id="response" class="card" style="display: none;"></div>
    </div>

    <script>
        // 删除用户
        function deleteUser(id) {
            if (confirm(`确定要删除用户 ${id} 吗？`)) {
                fetch(`/api/users/${id}`, {
                    method: 'DELETE'
                })
                .then(response => {
                    if (response.status === 204) {
                        const responseDiv = document.getElementById('response');
                        responseDiv.style.display = 'block';
                        responseDiv.innerHTML = '<h3>删除成功</h3>';
                        // 刷新当前页面
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else if (response.status === 404) {
                        throw new Error('用户不存在');
                    } else {
                        throw new Error(`HTTP错误，状态码: ${response.status}`);
                    }
                })
                .catch(error => {
                    console.error('Error deleting user:', error);
                    const responseDiv = document.getElementById('response');
                    responseDiv.style.display = 'block';
                    responseDiv.innerHTML = `<h3>删除失败</h3><p>${error.message}</p>`;
                });
            }
        }
    </script>
</body>
</html>